<template>
    <a-modal 
    width='700px'
    title="授权" 
    :visible="visible" 
    @cancel="() => { $emit('cancel') }"
    @ok="() => { $emit('create') }"
    >
      <!-- @scroll="handleScroll";:selected-keys="selectedKeys" -->
        <a-transfer
          :list-style="{
            width: '270px',
            height: '260px',
          }"
          :data-source="mockData"
          :titles="['供选择的租户', '授权访问的租户']"
          :operations="['加入右侧', '加入左侧']"
          :target-keys="targetKeys"
          :render="item => item.title"
          @change="handleChange"
        />
    </a-modal>
</template>

<script>
import axios from 'axios'

export default {
  name:'transfer',
  data(){
    return{
      mockData: [],
      targetKeys: [],
    }
  },
  //从父组件传来的参数
  props: [
    'visible',
    'transferId'     
  ],
  created(){
  },
  mounted() {
  },
  watch:{
    transferId(n,o){
      this.mockData =[]
      this.targetKeys =[]
      // console.log(n)
      const targetKeys = [];
      const mockData = [];
      let obj = {
        resourceId: n,
      };
      this.axios.post('/sys/resource/listResources',obj
      ).then((res) => {
        let data={}
        res.result.tenantNoList.forEach(e => {
          data = {
            key:e.id.toString(),
            title:e.name,
            status:e.status
          }
          mockData.push(data)
        });
        res.result.tenantList.forEach(p=>{
          data = {
            key:p.id.toString(),
            title:p.name,
            status:p.status
            }
          mockData.push(data)
          targetKeys.push(data.key)
        })
        this.mockData =mockData;
        this.targetKeys = targetKeys;
      })
    }
  },
  methods: {
    setmock(){
      // console.log('id',this.transferId)
    },
    filterOption(inputValue, option) {
      return option.description.indexOf(inputValue) > -1;
    },
    handleChange(targetKeys, direction, moveKeys) {
      // console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys;
      this.$emit('targetKeys',this.targetKeys)
      // console.log(this.targetKeys)
    },
  },


}
</script>

<style lang="scss" scoped>
.ant-modal-content{
  width: 800px !important;
}
</style>